<template>
  <div class="tenantMenu_main main_container">
    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <HeaderOperation :parent="this" />
        </div>
      </div>
    </div>
    <div v-loading="loading" class="main_main">
      <search-bar-new :parent="this" />
      <div class="main_main_container">

        <div :class="isShowMaterialType == '1'?'main_main_left' : 'main_main_left1'">
          <div class="main_main_left_top">
            <el-tree
              ref="tree"
              :data="deptData"
              node-key="id"
              :expand-on-click-node="false"
              :default-expand-all="true"
              :highlight-current="true"
              @node-click="treeNodeClick"
            >
              <span slot-scope="{ node, data }" class="tree-node">
                <span class="node_name">{{ data.name }}</span>
                <span class="node_operate">
                  <!--                  <a class="node_operate_item" @click.stop="addNext(data)">-->
                  <!--                    <svg-icon icon-class="树新增" />-->
                  <!--                  </a>-->
                  <!--                  <a v-if="node.level>1" class="node_operate_item" @click.stop="editDept(data)">-->
                  <!--                    <svg-icon icon-class="树编辑" />-->
                  <!--                  </a>-->
                  <!--                  <a v-if="node.level>1" class="node_operate_item" @click.stop="delDept(data)">-->
                  <!--                    <svg-icon icon-class="树删除" />-->
                  <!--                  </a>-->
                </span>
              </span>
            </el-tree>
          </div>
          <!--          <div class="main_main_left_bottom">-->
          <!--            <a :class="activeNum==2?'active':''" @click.stop="unassignedUser">-->
          <!--              <div class="main_main_left_bottom_item">被停用物料</div>-->
          <!--            </a>-->
          <!--          </div>-->
        </div>
        <div :class="isShowMaterialType == '1'?'main_main_right':'main_main_right1'">
          <!--          <div class="main_main_right_header">-->
          <!--            <div class="main_main_right_header_left">-->
          <!--              <span>{{ currentDeptName }}</span>-->
          <!--            </div>-->
          <!--          </div>-->
          <div ref="table_container" class="table_container">
            <el-table
              v-if="tableColumns.length>0"
              ref="table"
              row-key="randonId"
              :data="tableData"
              stripe
              border
              :height="tableHeight"
              :tree-props="{children: 'details', hasChildren: 'hasChildren'}"
              :cell-class-name="cellClassName"
              :cell-style="cellStyle"
              @cell-click="cellClick"
              @sort-change="(column)=>{sortChange(column, this)}"
              @selection-change="(val)=>{selectionChange(val, this)}"
            >
              <el-table-column type="selection" width="70" align="center" />
              <Column
                v-for="(column,index) in tableColumns"
                :key="index"
                :prop="column.prop"
                :is-show="column.isShow"
                :label="column.label"
                :sortable="column.sortable"
                :width="column.width"
                :min-width="column.minWidth"
                :fixed="column.fixed"
                :column-type="column.columnType"
                :is-tree="column.isTree"
              />
            </el-table>
          </div>

          <div class="main_bottom">
            <pagination
              :total="total"
              :page.sync="pageData.pageNum"
              :limit.sync="pageData.pageSize"
              :selected-num="selectionsAll.length"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { list, materialClassify, getInfo2, exportList } from '@/api/warehouseManagement/warehouseInventory'
import { getSystemSet } from '@/api/common/systemSet'
import { list as warehouseList } from '@/api/warehouseManagement/warehouseModeling'
import { getDictSelects } from '@/api/common/common'
import ShowDetail from '@/components/JLINK2/common/ShowDetailTitle'
import icon_notAvailable from '@/assets/images/baseInfo/暂无图片.png'
import { mapGetters } from 'vuex'
import { materialClassificationList } from '@/api/warehouseManagement/materialInfo'
export default {
  name: 'Index',
  data() {
    return {
      icon_notAvailable: icon_notAvailable,
      loading: true,
      pageId: '库存清单',
      pageExportId: '库存清单导出', // 页面导出标识
      pageData: {
        companyName: undefined,
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        checked: false
      },
      deptData: [],
      totalWord: ['stockNum'], // 合计导出字段
      total: 1, // 数据一共有多少条
      mainId: 'id',
      tableHeight: '0',
      isShowMaterialType: '1',
      tableData: [],
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      defaultTableColumns: [// 表格常规字段（初始值）
        { prop: 'imgUrl', label: '图片', minWidth: '120', columnType: 'picture', isTree: 'details', canOrder: false, isRegular: true },
        { prop: 'materialCode', label: '物料编码', minWidth: '160', isRegular: true },
        { prop: 'materialName', label: '物料名称', minWidth: '160', canOrder: false, isRegular: true },
        { prop: 'materialModel', label: '规格型号', minWidth: '160', canOrder: false, isRegular: true },
        { prop: 'materialTypeName', label: '物料分类', canOrder: false, isRegular: true },
        { prop: 'descriptionName', label: '物料属性', canOrder: false, isRegular: true },
        { prop: 'weight', label: '重量', canOrder: false, isRegular: true },
        { prop: 'texture', label: '材质', canOrder: false, isRegular: true },
        { prop: 'brand', label: '品牌', canOrder: false, isRegular: true },
        { prop: 'qualityGuaranteePeriod', label: '保质期(天)', canOrder: false, isRegular: true },
        { prop: 'materialUnitName', label: '物料单位', canOrder: false, isRegular: true },
        { prop: 'palletBatchCode', label: '批号', canOrder: false },
        { prop: 'productDate', label: '生产日期', canOrder: false },
        { prop: 'warehouseName', label: '所属仓库', canOrder: false },
        { prop: 'locationName', label: '所属库位', canOrder: false },
        { prop: 'productCountDown', label: '到期倒计时(天)', canOrder: false },
        { prop: 'minimumInventory', label: '最小库存', canOrder: false, isRegular: true },
        { prop: 'maximumInventory', label: '最大库存', canOrder: false, isRegular: true },
        { prop: 'stockNum', label: '库存数量', minWidth: this.SETTINGS.settings_decimalDigits_length, canOrder: false, fixed: 'right', isRegular: true }
      ],
      exportTableColumns: [// 表格常规字段（初始值）
        { prop: 'materialCode', label: '物料编码' },
        { prop: 'materialName', label: '物料名称', minWidth: '200', canOrder: false },
        { prop: 'materialModel', label: '规格型号', minWidth: '200', canOrder: false },
        { prop: 'materialTypeName', label: '物料分类', canOrder: false },
        { prop: 'descriptionName', label: '物料属性', canOrder: false },
        { prop: 'weight', label: '重量', canOrder: false },
        { prop: 'texture', label: '材质', canOrder: false },
        { prop: 'brand', label: '品牌', canOrder: false },
        { prop: 'qualityGuaranteePeriod', label: '保质期(天)', canOrder: false },
        { prop: 'materialUnitName', label: '物料单位', canOrder: false },
        { prop: 'palletBatchCode', label: '批号', canOrder: false },
        { prop: 'productDate', label: '生产日期', canOrder: false },
        { prop: 'warehouseName', label: '所属仓库', canOrder: false },
        { prop: 'locationName', label: '所属库位', canOrder: false },
        { prop: 'productCountDown', label: '到期倒计时(天)', canOrder: false },
        { prop: 'minimumInventory', label: '最小库存', canOrder: false },
        { prop: 'maximumInventory', label: '最大库存', canOrder: false },
        { prop: 'stockNum', label: '库存数量', minWidth: this.SETTINGS.settings_decimalDigits_length, canOrder: false }

      ],

      defaultExport: [],
      defaultSearchColumns: [// 搜索区常规字段（初始值）
        { prop: 'searchValue', label: '模糊搜索', type: 'input' },
        // { prop: 'materialCode', label: '物料编码', type: 'input' },
        // { prop: 'materialName', label: '物料名称', type: 'input' },
        // { prop: 'materialModel', label: '规格型号', type: 'input' },
        // { prop: 'materialTypeId', label: '物料分类', type: 'select', optionsName: 'materialType' },
        { prop: 'materialUnitId', label: '物料单位', type: 'dict', optionsName: 'materialUnitOptions' },
        { prop: 'descriptionId', label: '物料属性', type: 'dict', optionsName: 'descriptionOptions' },
        // { prop: 'palletBatchCode', label: '批号', type: 'input' },
        // { prop: 'weight', label: '重量', type: 'input' },
        // { prop: 'texture', label: '材质', type: 'input' },
        // { prop: 'brand', label: '品牌', type: 'input' },
        // { prop: 'qualityGuaranteePeriod', label: '保质期(天)', type: 'input' },
        { prop: 'warehouseId', label: '所属仓库', type: 'select', optionsName: 'warehouseOptions' },
        { prop: 'inventoryTime', label: '呆滞库存', type: 'time' }
        // { prop: 'stockNum', label: '库存数量', type: 'input' }
      ],
      checked: false,
      minWidth: '',
      warehouseOptions: [],
      operationData: [ // 右上角的操作按钮
        { label: '批量导出3', perm: 'wms:stock:export' },
        { label: '页面配置2', perm: '' }
      ],
      materialType: [],
      materialUnitOptions: [],
      descriptionOptions: [],
      showKey: {
        type: 'column_two',
        keys: [
          { type: 'form', name: '物料编码', key: 'materialCode' }, // type: 'form' 表示是普通的表单展示
          { type: 'form', name: '物料名称', key: 'materialName' },
          { type: 'form', name: '规格型号', key: 'materialModel' },
          { type: 'form', name: '物料分类', key: 'materialTypeName' },
          { type: 'form', name: '物料属性', key: 'descriptionName' }, // length:'double' 表示占两列
          { type: 'form', name: '重量', key: 'weight' },
          { type: 'form', name: '材质', key: 'texture' },
          { type: 'form', name: '品牌', key: 'brand' },
          { type: 'form', key: 'qualityGuaranteePeriod', name: '保质期(天)' },
          { type: 'form', key: 'materialUnitName', name: '物料单位' },
          { type: 'form', name: '库存数量', key: 'stockNum' },
          { type: 'br' },
          { type: 'file', name: '图片', fileName: 'imgName', fileRealName: 'imgRealName', fileUrl: 'imgUrl' },
          { type: 'table', name: '明细清单', key: 'details', columns: [ // type: 'table' 表示是表格
            { type: 'column', name: '批号', key: 'palletBatchCode' },
            { type: 'column', name: '生产日期', key: 'productDate' },
            { type: 'column', name: '库存数量', key: 'stockNum' },
            { type: 'column', name: '仓库', key: 'warehouseName' },
            { type: 'column', name: '库位', key: 'locationName' },
            { type: 'column', name: '到期倒计时(天)', key: 'productCountDown' }
          ] }
        ]
      }

    }
  },

  computed: {
    ...mapGetters([
      'companyId'
    ]),
    // 分页器
    selectedNum() {
      return this.$refs.table ? this.$refs.table.selection.length : 0
    }
  },
  created() {
    this.getSystemSet()
    // this.getList()
    this.getMaterialClassify()
    this.getDictOptions()
    this.grtWarehouseList()
    this.getDeptTree()
    this.minWidth = this.SETTINGS.settings_decimalDigits_length
  },
  methods: {
    treeNodeClick(data) { // 点击树节点
      this.currentDeptName = data.name
      this.materialTypeIds = data.id
      this.pageData.pageNum = 1
      // Object.keys(this.pageData).forEach(key => { // 给右边数据赋值
      //   if (key !== 'pageNum' && key !== 'pageSize' && key !== 'orderByColumn' && key !== 'isAsc') {
      //     this.pageData[key] = ''
      //   }
      // })
      this.getList()
    },
    deptOneClick() { // 默认点击一下第一级部门
      document.querySelector('.el-tree-node__content').click()
    },
    getDeptTree() {
      materialClassificationList().then(res => {
        this.deptData = res.data
        this.$nextTick(() => {
          this.deptOneClick()
        })
      })
    },
    grtWarehouseList() {
      warehouseList({ pageNum: 1, pageSize: 9999 }).then(res => {
        const cacheData = []
        res.data.filter(item => {
          cacheData.push({
            value: item.id,
            label: item.warehouseName
          })
        })
        this.warehouseOptions = cacheData
      })
    },
    getDictOptions() {
      getDictSelects('materialUnitId').then(res => {
        this.materialUnitOptions = res.data
      })
      getDictSelects('descriptionId').then(res => {
        this.descriptionOptions = res.data
      })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property == 'stockNum') {
        if (row.maximumInventory && (Number(row.stockNum) > Number(row.maximumInventory))) {
          return 'exceedMaximum'
        } else if (row.minimumInventory && (Number(row.stockNum) < Number(row.minimumInventory))) {
          return 'exceedMinimum'
        }
        if (columnIndex == 1) {
          return 'SaleOrderCodeColumnClass'
        }
      }
      if (!row.id) {
        return 'displayNoneClass'
      }
    },
    cellStyle({ row, column }) {
      // if (column.type == 'selection' && !row.isNotselected) {
      //   return {
      //     display: 'none',
      //     cursor: 'none'
      //   }
      // }
      if (column.property == 'materialCode' && row.isNotselected) {
        return {
          cursor: 'pointer',
          color: '#387bfc'
        }
      }
    },
    cellClick(row, column, cell) {
      if (column.property == 'materialCode' && row.isNotselected) {
        this.detail(row)
      }
    },
    showZero(e) {
      if (e) {
        this.pageData.isAll = '1'
      } else {
        this.pageData.isAll = '0'
      }
      this.getList()
    },
    getSystemSet() {
      // 获取系统设置数据
      getSystemSet(this.companyId).then(res => {
        this.isShowMaterialType = res.data.showMaterialType
        // 获取系统设置中的维修人员角色筛选
        this.pageData.isAll = res.data.warehouseInventoryIsAllShow
      })
    },
    getList() {
      this.tableData = []
      const cachePageData = this.$deepClone(this.pageData)
      cachePageData.materialTypeIds = this.materialTypeIds
      list(cachePageData).then(res => {
        res.data.forEach((item) => { item.isNotselected = true })
        res.data.filter(item => {
          item.isShowImgUrl = 1
          if (item.details && item.details.length > 0) {
            item.details.filter(ele => {
              ele.isShowImgUrl = 2
            })
          }
        })
        this.tableData = res.data
        // if (this.tableData.details && this.tableData.details.length > 0) {
        //   console.log(2222)
        //   this.tableData.details.filter(item => {
        //     item.imgUrl = 1
        //   })
        // }
        // console.log(this.tableData,11111)
        this.total = res.total
        this.loading = false
        // // 如果从仓库看板跳转超储清单
        // if (this.pageData.isExceeded && this.pageData.isExceeded == 1) {
        //   const tablelist = []
        //   this.tableData.map((item) => {
        //     if (item.maximumInventory && (Number(item.stockNum) > Number(item.maximumInventory))) {
        //       tablelist.push(item)
        //     }
        //   })
        //   this.tableData = tablelist
        //   console.log(tablelist)
        // // 如果从仓库看板跳转低储清单
        // } else if (this.pageData.isExceeded == 0) {
        //   console.log(111)
        //   const tablelist = []
        //   this.tableData.map((item) => {
        //     if (item.minimumInventory && (Number(item.stockNum) < Number(item.minimumInventory))) {
        //       tablelist.push(item)
        //     }
        //   })
        //   console.log(tablelist)
        //   this.tableData = tablelist
        // }
        this.$nextTick(() => {
          this.setSelectRow(this)// 设置行选中
          this.tableHeight = this.$refs.table_container.offsetHeight
        })
      })
    },
    getMaterialClassify() {
      materialClassify(this.pageData).then(res => {
        const cacheData = []
        res.data.forEach(item => {
          cacheData.push({
            value: item.id,
            label: item.name
          })
        })
        this.materialType = cacheData
      })
    },
    detail(row) {
      if (this.pageData.isAll == undefined || this.pageData.isAll == null || this.pageData.isAll == '') {
        this.pageData.isAll = '0'
      }
      getInfo2(row[this.mainId], this.pageData.isAll).then(res => {
        this.$layer.iframe({// 弹框
          content: {
            content: ShowDetail, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: {
              showData: res.data,
              showKey: this.showKey
            }// props
          },
          area: ['1320px', '700px'],
          title: '库存明细', // 标题
          shadeClose: false // 点击遮罩是否关闭
        })
      })
    },
    getExportData(data) {
      return new Promise(function(resolve, reject) {
        exportList(data).then(res => {
          resolve(res.data)
        })
      })
      // return exportList(data)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .picture_div {
  padding-left: 20px !important;
}
.main_main{
  height: calc(100% - 50px);
}
.main_main_container{
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  .main_main_left1 {
    display: none !important;
  }
  .main_main_left{
    width: 17%;
    height: calc(100% - 20px);
    margin-top: 20px;
    border-right: 1px solid rgba(51, 51, 51, 0.5);
    border-top: 2px solid rgba(51, 51, 51, 0.5);
    .main_main_left_top{
      width: 100%;
      height: calc(100% - 57px);
      overflow-y: auto;
      .el-tree{
        background-color: transparent;
      }
      /deep/ .el-tree-node__content {
        height: 40px;
      }
      /deep/ .el-tree-node__content:hover{
        background-color: rgba(56,123,252,0.5) !important;
        color: white;
      }
    }
    .main_main_left_bottom{
      width: 100%;
      .main_main_left_bottom_item{
        background-color: rgba(74, 77, 82, 0.2);
        height: 40px;
        display: flex;justify-content: flex-start;align-items: center;padding-left: 24px;
      }
      .main_main_left_bottom_item:last-child{
        border-top: 1px solid white;
      }
      .main_main_left_bottom_item:hover{
        background-color: rgba(56,123,252,.5);
        color: white;
      }
      .active{
        .main_main_left_bottom_item{
          background-color: rgba(56,123,252,1);
          color: white;
        }
      }
    }
  }
  .max_user{
    color: rgb(248, 146, 12);
    font-size: 12px;
    margin-left: 20px;
  }
  .main_main_right1 {
    width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main_main_right{
    width: 83%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .changeSuperAdmin{
    width: 120px;
  }
}
/deep/ .el-table__expand-icon {
  position: absolute !important;
  top: 10px;
  left: 1px;
}
///deep/ .el-table__cell:nth-of-type(2) {
//  div {
//    margin-left: 7px;
//  }
//  // .cell {
//  //   display: flex;
//  // }
//}
.icon_notAvailable {
  width: 100% !important;
  height: 100% !important;
}
// /deep/.el-tooltip{
//   display: flex;
// }
/deep/ .SaleOrderCodeColumnClass_expand{
  display: inline-block;
  width: 20px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  margin-right: 3px;
}
/deep/.el-table .displayNoneClass .cell .el-checkbox__inner{
  display: none !important
}
.main_bottoms{
  width: 100%;
  height: 50px;
  padding: 0px 20px;
  display: flex;justify-content: end;align-items: center;
}
.exceedMaximum{
color: rgb(58, 187, 0);
}
.exceedMinimum{
    color: #e76c6c;

}
</style>
